<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>kxbdMarquee 模拟Marquee无缝滚动 </title>

</head>

<style type="text/css">

*{margin:0;padding:0;}

body{font-size:12px; font-family:"微软雅黑"}

a{color:#333; text-decoration:none;}

ul{list-style:none;}

#marquee1{width:310px;height:45px;overflow:hidden;background:#333;border:2px solid #333; margin:20px auto 0;}

#marquee1 ul li{float:left; padding:0 1px;}

#marquee1 ul li img{display:block;}





#marquee2{width:300px;height:25px;overflow:hidden; background:#EFEFEF; margin:20px auto 0;}

#marquee2 ul li{float:left; padding:0 10px; line-height:25px;}



#marquee3{width:60px;height:235px;overflow:hidden;background:#333;border:2px solid #333; margin:20px auto 0;}

#marquee3 ul li{float:left; padding:1px 0;}

#marquee3 ul li img{display:block;}



#marquee4{width:200px;height:200px; overflow:hidden;background:#EFEFEF; margin:20px auto 0;}

#marquee4 ul li{float:left; width:180px; padding:10px; line-height:20px;}



.shuoming{ text-align:center; margin-top:30px; }



.shuoming p{ height:40px; font-size:18px;  line-height:40px;}

</style>

</head>

<body>

<div id="marquee1">

	<ul>

		<li><img  src="img/01s.jpg" width="60" height="45"></li>

		<li><img  src="img/02s.jpg" width="60" height="45"></li>

		<li><img  src="img/03s.jpg" width="60" height="45"></li>

		<li><img  src="img/04s.jpg" width="60" height="45"></li>

		<li><img  src="img/05s.jpg" width="60" height="45"></li>

		<li><img  src="img/06s.jpg" width="60" height="45"></li>

		<li><img  src="img/07s.jpg" width="60" height="45"></li>

		<li><img  src="img/08s.jpg" width="60" height="45"></li>

	</ul>

</div>



<div id="marquee2">

	<ul>

		<li><a href="#">新闻公告一</a></li>

		<li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li>

		<li><a href="#">新闻公告三新闻公告三</a></li>

		<li><a href="#">新闻公告四新闻公告四新闻公告四</a></li>

		<li><a href="#">新闻公告五新闻公告五新闻公告五</a></li>

		<li><a href="#">新闻公告六新闻公告六新闻公告六</a></li>

	</ul>

</div>



<div id="marquee3">

	<ul>

		<li><img  src="img/01s.jpg" width="60" height="45"></li>

		<li><img  src="img/02s.jpg" width="60" height="45"></li>

		<li><img  src="img/03s.jpg" width="60" height="45"></li>

		<li><img  src="img/04s.jpg" width="60" height="45"></li>

		<li><img  src="img/05s.jpg" width="60" height="45"></li>

		<li><img  src="img/06s.jpg" width="60" height="45"></li>

		<li><img  src="img/07s.jpg" width="60" height="45"></li>

		<li><img  src="img/08s.jpg" width="60" height="45"></li>

	</ul>

</div>



<div id="marquee4">

	<ul>

		<li><a href="#">新闻公告一新闻公告一</a></li>

		<li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>

		<li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li>

		<li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>

		<li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>

		<li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>

	</ul>

</div>



<div class="shuoming">

	<p>用法说明</p>

    <img src="img/001.jpg" />

</div>

<script src="js/jquery-1.3.2.min.js"></script>

<script src="js/jquery.kxbdMarquee.js"></script>

<script>

(function(){

	$("#marquee1").kxbdMarquee({direction:"right"});

	$("#marquee2").kxbdMarquee({isEqual:false});

	$("#marquee3").kxbdMarquee({direction:"down"});

	$("#marquee4").kxbdMarquee({direction:"up",isEqual:false});

})();

</script>

</body>

</html>